<template>
  <div class="component">
    <div class="container-center">
      <div class="over-hidden">
        <router-link
          class="btn btn-default pull-right icon icon-arrowsleftline mt-lg"
          :to="getMicroRoute('/tools')"
        >
          返回列表</router-link>
        <h2 class="text-left">转化文件</h2>
      </div>
      <div class="row">
        <div class="col-xs-12 row-cell">
          <div class="form-group">
            <label class="form-label">输入文本：</label>
            <div class="form-field">
              <textarea class="form-textarea json-input" rows="4" v-model="inputData"></textarea>
            </div>
          </div>
        </div>
        <div class="col-xs-6 row-cell" style="display:none">
          <div class="form-group">
            <label class="form-label">输出文本：</label>
            <div class="form-field">
              <textarea class="form-textarea json-input" rows="4" v-model="outputData"></textarea>
            </div>
          </div>
        </div>
        <div class="row-cell clear pt-sm mb-sm">
          <div class="form-inline">
            <div class="form-group">
              <label class="form-label">文件名</label>
              <input class="form-input" v-model="name" placeholder="json/txt" />
            </div>
            <div class="form-group">
              <label class="form-label">文件后缀</label>
              <input class="form-input" v-model="ext" placeholder="json/txt" />
            </div>
            <div class="form-group ml-sm">
              <button class="btn btn-default" type="button" @click="toDownload">下载</button>
            </div>
          </div>
          <div class="pull-right">
            <span class="form-inline">
              <SwitchRich v-model="isPipe" label="覆盖输入" />
            </span>
            <Pipe name="uplower" :operation="{inputData: outputData}" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import SwitchRich from '@/components/vue/components/switch-rich/2.0/switch-rich.vue'
import Pipe from '../index/pipe.vue'
import { filer } from '@daelui/dogjs/dist/components'

/* 大小写转换 */
export default {
  components: {
    SwitchRich,
    Pipe
  },

  data () {
    return {
      inputData: '',
      outputData: '',
      name: 'dtools-file-' + new Date().getTime(),
      ext: 'txt',
      isPipe: false
    }
  },

  watch: {
    inputData () {
      this.outputData = this.inputData
    }
  },

  methods: {
    /**
     * @function 下载
    */
    toDownload () {
      let data = this.inputData
      let name = this.name || 'dtools-file-' + new Date().getTime()
      let ext = '.' + ((/\.?\w+/i.exec(this.ext) || [])[0] || '.txt').replace(/\.+/, '')
      filer.downloadFile(name + ext, data)
    }
  },

  mounted () {
    // 管道数据
    if (this.$store.state.inputData) {
      this.inputData = this.$store.state.inputData
      this.$store.state.inputData = ''
    }
  }
}
</script>

<style lang="less">
.json-input{
  height: 450px;
}
</style>
